<template>
  <div class="user-container">
    <div v-for="user in modelValue" :key="user.id" class="user-item">
      {{ user.nickname }}&ensp;<el-icon class="delete-icon" @click="deleteUser(user)">
        <Close />
      </el-icon>
    </div>
  </div>
  <el-button link type="primary" @click="handleClick">
    <el-icon><Plus /></el-icon>&ensp;添加成员
  </el-button>
  <MemberSelectorDialog
    :options="memberSelectorOption"
    :where-to-use="whereToUse"
    @changeSelectedUsers="changeSelectedUsers"
  ></MemberSelectorDialog>
</template>

<script>
  import MemberSelectorDialog from './MemberSelectorDialog.vue';
  /** 业务组件-用户选择器 */
  export default {
    name: 'MemberSelector',
    components: {
      MemberSelectorDialog,
    },
    inheritAttrs: false,
    props: {
      modelValue: {
        type: Array,
        default() {
          return [];
        },
      },
      placeholder: {
        type: String,
        default: '请选择',
      },
      width: {
        type: String,
        default: '',
      },
      whereToUse: {
        type: String,
        default: 'default',
      },
    },
    emits: ['update:modelValue'],
    data() {
      return {
        memberSelectorOption: {
          width: 636,
          title: '选择人员',
          visible: false,
          curSelectedUsers: [],
        },
      };
    },
    methods: {
      deleteUser(user) {
        const val = this.modelValue.filter((item) => item.id !== user.id);
        this.$emit('update:modelValue', val);
      },
      handleClick() {
        this.memberSelectorOption.visible = true;
        this.memberSelectorOption.curSelectedUsers = [...this.modelValue];
      },
      changeSelectedUsers(val) {
        this.$emit('update:modelValue', val);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .user-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .user-item {
      background: #f8f9f9;
      border-radius: 2px;
      padding: 7px 10px;
      margin: 0px 5px 5px 0;
      font-size: 12px;
      line-height: 1;
      .delete-icon {
        cursor: pointer;
        vertical-align: top;
      }
    }
  }
</style>
